{% load pages_tags %}{% load_pages %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<link rel="shortcut icon" href="/media/images/favicon.ico" />
<meta charset="UTF-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="description" content="epos" />
<title>EposIT Solutions Ltd</title>
<!-- ////////////////////////////////// -->
<!-- //      Start Stylesheets       // -->
<!-- ////////////////////////////////// -->
<link href="/media/styles/style.css" rel="stylesheet" type="text/css" />
<link href="/media/styles/prettyPhoto.css" rel="stylesheet" type="text/css" />
<link href="/media/styles/inner.css" rel="stylesheet" type="text/css" />

<link type="text/css" href="/media/styles/skitter.styles.css" media="all" rel="stylesheet" />
<!--[if lt IE 9]>
<link href="/media/styles/ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- ////////////////////////////////// -->
<!-- //      Javascript Files        // -->
<!-- ////////////////////////////////// -->
<script type="text/javascript" src="/media/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/media/js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="/media/js/jquery.skitter.js"></script>
<script type="text/javascript" src="/media/js/hoverIntent.js"></script> 
<script type="text/javascript" src="/media/js/superfish.js"></script> 
<script type="text/javascript" src="/media/js/supersubs.js"></script>
<script type="text/javascript" src="/media/js/contact.js"></script>
<script type="text/javascript" src="/media/js/fade.js"></script>
<script type="text/javascript" src="/media/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="/media/js/jquery.cycle.all.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
	//Menu
	jQuery("ul.sf-menu").supersubs({ 
	minWidth		: 12,		// requires em unit.
	maxWidth		: 27,		// requires em unit.
	extraWidth		: 3	// extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
						   // due to slight rounding differences and font-family 
	}).superfish();  // call supersubs first, then superfish, so that subs are 
					 // not display:none when measuring. Call before initialising 
					 // containing tabs for same reason.
					 
	jQuery(document).ready(function() {
		jQuery(".box_skitter_large").skitter({
			animation: "random",
			interval: 3000,
			numbers: false, 
			numbers_align: "right", 
 			hideTools: true,
			controls: false,
			focus: false,
			focus_position: true,
			width_label:'340px', 
			enable_navigation_keys: true,   
 			progressbar: false
		});
	});				  
					 
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
//Menu
jQuery("ul.sf-menu").supersubs({
minWidth : 12, // requires em unit.
maxWidth : 27, // requires em unit.
extraWidth : 3 // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
// due to slight rounding differences and font-family
}).superfish(); // call supersubs first, then superfish, so that subs are
// not display:none when measuring. Call before initialising
// containing tabs for same reason.
//jQuery tab
jQuery(".tab-content").hide(); //Hide all content
jQuery("ul.tabs li:first").addClass("active").show(); //Activate first tab
jQuery(".tab-content:first").show(); //Show first tab content
//On Click Event
jQuery("ul.tabs li").click(function() {
jQuery("ul.tabs li").removeClass("active"); //Remove any "active" class
jQuery(this).addClass("active"); //Add "active" class to selected tab
jQuery(".tab-content").hide(); //Hide all tab content
var activeTab = jQuery(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
jQuery(activeTab).fadeIn(200); //Fade in the active content
return false;
});
});
</script> 
</head>
<body>

<div id="outer-container">
	<div id="container">
    	<div id="top">
        <div id="logo_wrap">
        	<div id="logo"><a href="index.html"><img src="/media/images/logo.png" alt=""  /></a></div><!-- end #logo -->
            </div>
            <div id="nav_wrap">
		
		
            <div id="nav">
                <ul id="topnav" class="sf-menu">
                    <li><a href="/home/"  class="current">Home</a></li>
                    <li><a href="/products/">Products</a>
                    </li>
                    <li><a href="/products/">Epos</a>
		    <ul>
			<li><a href="/hardware/">Hardware</a></li>
			<li><a href="/software/">Software</a></li>
		    </ul>
		    </li>
                    <li><a href="services.html">IT</a></li>
                    <li><a href="/services/">Solutions</a>
                    </li>
		    <li><a href="/about-us/">About</a></li>
                    
                    <li><a href="/contact/">Contact</a></li>
                </ul><!-- #topnav -->
            </div><!-- #nav -->	
            </div>
        </div><!-- end #top -->
        
	{% block content %}

	{% endblock %}
	
        <div id="footer">
        <div id="footer-pattern">
        
			<div class="container940">
            	<div id="footcol1">
                	<ul>
                    	<li class="widget-container">
                            <h2 class="widget-title">Latest News</h2>
			    {% if all_posts %} 
                           {% for post in all_posts %}
			    <ul id="recentpostwidget">
                                <li>
                                    <img src="/media/{{post.footer_thumbnail}}" height="51px" width="51px" alt="" class="alignleft frame" />
                                    <h5><a href="#">{{ post.title }}</a></h5>
                                    <span>{{post.description}}</span>
                                </li>
			   
                            </ul>
			     {% endfor %}
			     {% endif %}
                        </li>
                    </ul>
                </div>
                <div id="footcol2">
                	<ul>
                        <li class="widget-container">
                        	<h2 class="widget-title">Latest News</h2>
                            <ul>
                            	<li><a href="#">Vivamus hendrerit venenatis quam</a></li>
                                <li><a href="#">Aenean congue nisl in nibh</a></li>
                                <li><a href="#">Proin tempus tempus orci eu imperdiet</a></li>
                                <li><a href="#">Mauris interdum</a></li>
                                <li><a href="#">Donec id turpis at risus</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div id="footcol3">
                	<ul>
                        <li class="widget-container">
                        	<h2 class="widget-title">Gallery</h2>
                            <ul id="flickr">
                            	<li><a href="#"><img src="/media/images/content/pic7.jpg" alt="" class="frame" /></a></li>
                                <li><a href="#"><img src="/media/images/content/pic8.jpg" alt="" class="frame" /></a></li>
                                <li class="nomargin"><a href="#"><img src="/media/images/content/pic9.jpg" alt="" class="frame" /></a></li>
                                <li><a href="#"><img src="/media/images/content/pic10.jpg" alt="" class="frame" /></a></li>
                                <li><a href="#"><img src="/media/images/content/pic11.jpg" alt="" class="frame" /></a></li>
                                <li class="nomargin"><a href="#"><img src="/media/images/content/pic12.jpg" alt="" class="frame" /></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div id="footcol4">
                	<ul>
                        <li class="widget-container">
                        	<h2 class="widget-title">About EposIT</h2>
                            <div class="textwidget">
                            <p>
                            Nulla interdum, enim eu dictum pellentesque, ipsum elit varius purus, et imperdiet odio magna lobortis purus. 
                            </p>
                            <span>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus sed mauris at eros mollis ultricies vitae porta dui. </span>
                            </div>
                        </li>
                    </ul>
                </div>
           
            <div class="clear"></div><!-- clear float -->
            </div><!-- end container940 -->
            
        </div><!-- end #footer-pattern -->  
		</div><!-- end #footer -->
        
        <div id="after-footer">
        	<div class="container940">
                <div id="sn">
                	<ul>
                    	<li><a href="#"><img src="/media/images/icons/fb.png" alt="" /></a></li>
                        
                        <li><a href="#"><img src="/media/images/icons/twitter.png" alt="" /></a></li>
                        <li><a href="#"><img src="/media/images/icons/youtube.png" alt="" /></a></li>
                    </ul>
                </div>
                <div id="footertext">
                    Copyright &copy;2012 EposIT Solutions Ltd  All Rights Reserved.
                </div>
               <div class="clear"></div><!-- clear float -->
            </div><!-- end container940 -->
        </div><!-- end #after-footer -->
        
	</div><!-- end #container -->
</div><!-- end #outer-container -->
		
</body>
</html>
